<template>
  <NavBar
    ref="navbarRef"
    :data="resumeNavbar"
    :activeIndex="memberStore.AppLangIndex"
    @click-navbar="clickNavBar"
  />
  <!-- 个人信息 -->
  <UserInfo />
  <!-- 证书 -->
  <Cert />
  <!-- 求职意向 -->
  <Intention />
  <!-- 工作经验 -->
  <Work />
  <!-- 教育经历 -->
  <Edu />
  <!-- 专业技能 -->
  <Skill />
  <!-- 专业技能 -->
  <Honor />
  <!-- 预览简历按钮 -->
  <ViewPDF />
</template>

<script setup lang="ts">
import { defineAsyncComponent, nextTick, provide, ref, watch } from "vue";
import { useMemberStore } from "../../../../store";
import { resumeNavbar } from "../a_data/navbar";
const NavBar = defineAsyncComponent(() => import("../a_components/navbar.vue"));
const UserInfo = defineAsyncComponent(
  () => import("./components/UserInfo.vue")
);
const Cert = defineAsyncComponent(() => import("./components/Cert.vue"));
const Intention = defineAsyncComponent(
  () => import("./components/Intention.vue")
);
const Work = defineAsyncComponent(() => import("./components/Work.vue"));
const Edu = defineAsyncComponent(() => import("./components/Edu.vue"));
const Skill = defineAsyncComponent(() => import("./components/Skill.vue"));
const Honor = defineAsyncComponent(() => import("./components/Honor.vue"));
const ViewPDF = defineAsyncComponent(() => import("./components/ViewPDF.vue"));

const memberStore = useMemberStore();
const navbarRef = ref();
watch(
  () => memberStore.AppLang,
  () => {
    activeResume.value = resumeNavbar[memberStore.AppLangIndex].lang;
    navbarRef.value.refresh();
  }
);

// 点击navbar-item
const activeResume = ref("");
activeResume.value = resumeNavbar[memberStore.AppLangIndex].lang;
provide("lang", activeResume);
const clickNavBar = ({ item, index }) => {
  activeResume.value = item.lang;
};
</script>
<style scoped lang="less"></style>
